<template>
	<nt-container bg-color="#F2F4F6">
		<view class="nt-message">
			<view class="nt-message__item" v-for="(it,index) in list" :key="index">
				<view class="nt-message__item--header">
					<image class="nt-message__item--header-icon" src="/static/image/order-message-1.png"></image>
					<view class="nt-message__item--header-info">
						<view class="nt-message__item--header-info__title">订单已取消通知</view>
						<view class="nt-message__item--header-info__time">05-27 08:10</view>
					</view>
				</view>
				<view class="nt-message__item--body">
					<view class="nt-message__item--body-item">
						<view class="nt-message__item--body-item__label">服务产品</view>
						<view class="nt-message__item--body-item__content">windows笔记本维修</view>
					</view>
					<view class="nt-message__item--body-item">
						<view class="nt-message__item--body-item__label">预约时间</view>
						<view class="nt-message__item--body-item__content">2023年05月20日 20:00</view>
					</view>
					<view class="nt-message__item--body-item">
						<view class="nt-message__item--body-item__label">服务地址</view>
						<view class="nt-message__item--body-item__content">广州 天河区 岗顶123</view>
					</view>
				</view>
			</view>
		</view>
	</nt-container>
</template>

<script>
import { getMessagesEventList } from "@/api"
export default {
	data(){
		return {
			list: []
		}
	},
	onLoad(){
		this.getMessageList()
	},
	methods: {
		getMessageList(){
			getMessagesEventList().then(res => {
				console.log(res)
				if(res.code === 1){
					this.list = res.data;
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.nt-message{
	padding: 30rpx;
	box-sizing: border-box;
	&__item{
		padding:20rpx;
		background:#fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		&--header{
			display:flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F2F4F6;
			&-icon{
				width: 100rpx;
				height: 100rpx;
			}
			&-info{
				padding-left: 30rpx;
				flex: 1;
				&__title{
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
				&__time{
					font-size: 26rpx;
					color: #aaa;
					margin-top: 10rpx;
				}
			}
		}
		&--body{
			&-item{
				display:flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 20rpx;
				&__label{
					font-size: 24rpx;
					color: #aaa;
					font-weight: bold;
				}
				&__content{
					flex: 1;
					padding-left: 20rpx;
					font-size: 24rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}
	}
}
</style>